<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header>
        <div>
          <img src="../assets/logo.png" height="30px;"></img>
          权限管理系统
        </div>
        <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changepwd">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="250px" style="background-color: rgb(238, 241, 246)">

          <!--      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                  <el-radio-button :label="false">展开</el-radio-button>
                  <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>-->
          <el-menu router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                   :collapse="isCollapse">

            <el-submenu index="1" v-for="(menu,index) in menuData">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">{{ menu.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="subMenu.path" v-for="subMenu in menu.subMenuList">{{
                    subMenu.name
                  }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="原始密码" prop="password" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword"  :label-width="formLabelWidth">
          <el-input type="password" v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"  prop="confirmPassword" :label-width="formLabelWidth">
          <el-input type="password" v-model="form.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePWD">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    //检查密码输入是否正确
    var checkPWD= (rule, value, callback) => {
      this.axios.get(this.$baseUrl+'user/checkPWD',{params:{"password":value}}).then(res=>{
        if (res.data.code!=200) {
          return callback(new Error('原始密码输入错误'));
        }else {
          return callback();
        }
      })

    }
    //比较两次密码是否一致
    var comparePWD= (rule, value, callback) => {
      if (this.form.newPassword!=this.form.confirmPassword) {
        return callback(new Error('两次密码输入不一致'));
      }else{}
      return callback();
      }
    return {
      isCollapse: false,
      menuData: [],
      formLabelWidth: '90px',
      dialogFormVisible: false,
      form: {
        password: '',//原密码
        newPassword: '',//新密码
        confirmPassword: '',//确认密码
      }, rules: {//修改密码校验规则
        password: [
          {required: true, message: '请输入原始密码', trigger: 'blur'},
          { validator: checkPWD, trigger: 'blur' }
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          { validator: comparePWD, trigger: 'blur' }
        ]
      }
    };
  }, methods: {
    changePWD() {//更改密码
       this.axios.post(this.$baseUrl+'user/changePWD',this.form).then(res=>{
           this.$message(res.data.msg);
           this.dialogFormVisible=false;

       })
    },
    handleCommand(cmd) {

      if (cmd == 'logout') {//退出
        this.$cookies.remove("tokenId");
        this.$router.push('/login');
      } else if (cmd = 'changepwd') {
        this.dialogFormVisible = true;
        /*   this.axios.get(this.$baseUrl + 'user/getLoginUserInfo').then(res => {
             this.userForm = res.data.data;
           })*/
      }

    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }, created() {

    this.axios.get(this.$baseUrl + 'menu/getTreeMenuByUsername').then(res => {
      this.menuData = res.data.data
    })
  }
}
</script>

<style scoped>

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-header {
  background-color: #252733;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 24px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 500px;
}
</style>
